<template>
  <div class="home-header">
    <div class="warp">
      <ul>
        <li v-for="(item, index) in lists" :key="'pannel' + index" @click="active(item.id)">
          <a :href="item.path" :class="act === item.id ? 'act' : ''">{{ item.name }}</a>
        </li>
        <template v-if="isLogin">
          <li><span></span></li>
          <li><a href="">我发表的帖</a></li>
          <li><a href="">我收藏的帖</a></li>
        </template>
      </ul>
      <div class="right">
        <i class="layui-icon layui-icon-search" @click="searchOpen"></i>
        <div class="layui-btn">发表新帖</div>
      </div>
    </div>
    <Dialog :height="'75px'" :width="'560px'" @close="close" :isShow="isShow">
      <template v-slot:dialog>
        <input type="text" placeholder="搜索内容，回车跳转"/>
      </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog.vue'
export default {
  name: 'home-header',
  data () {
    return {
      isShow: false,
      lists: [
        {
          id: 1,
          path: '/',
          name: '首页'
        },
        {
          id: 2,
          path: '/index/ask',
          name: '提问'
        },
        {
          id: 3,
          path: '/index/share',
          name: '分享'
        },
        {
          id: 4,
          path: '/index/discuss',
          name: '讨论'
        },
        {
          id: 5,
          path: '/index/suggest',
          name: '建议'
        },
        {
          id: 6,
          path: '/index/notice',
          name: '公告'
        },
        {
          id: 7,
          path: '/index/logs',
          name: '动态'
        }
      ],
      act: Number(localStorage.getItem('act')) || 1,
      isLogin: this.$store.state.isLogin
    }
  },
  components: {
    Dialog
  },
  methods: {
    close () {
      this.isShow = false
    },
    searchOpen () {
      this.isShow = true
    },
    active (id) {
      this.act = id
      localStorage.setItem('act', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.home-header {
  height: 50px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
  .warp {
    width: 1170px;
    height: 100%;
    margin: auto;
    position: relative;
    ul {
      display: flex;
      align-items: center;
      height: 100%;
      li {
        margin-right: 30px;
        a {
          &:hover {
            color: #5FB878;
          }
        }
        span {
          display: block;
          height: 16px;
          width: 1px;
          background-color: #e2e2e2;
        }
      }
    }
    .right {
      position: absolute;
      right: 0px;
      top: 5px;
      i {
        font-size: 20px;
        margin-right: 20px;
        vertical-align: middle;
        cursor: pointer;
        &:hover {
          color: #5FB878;
        }
      }
    }
  }
  input {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    padding-left: 20px;
  }
}
.act {
  color: #5FB878;
}
</style>
